<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>
<style>
  .application_setup {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .application_setup .setup-body {
    position: relative;
    width: 100%;
    height: 90%;
    overflow-y: auto;
  }

  .application_setup .menu-div {
    width: 100%;
    display: inline-table;
  }

  .application_setup .menu-div-btn {
    text-align: right;
  }

  .application_setup .title .div {
    cursor: pointer;
    padding: 17px;
    float: left;
    height: 100%;
    border-right: 1px solid #dcdee2;
  }

  .application_setup .title .bac-session {
    background: #e9eaec !important;
    opacity: 1 !important;
  }

  .application_setup .Button {
    margin-top: 8px;
    margin-right: 8px !important;
  }

  .application_setup .infor-intro-text {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
  }
</style>
<template>
  <div class="application_setup" id="application_setup">
    <div class="title table-head setup-title">
      <div class="div" v-bind:class="[show_menu == 'self' ? 'bac-session' : '']" @click="clickMenu('self')">我的应用</div>
      <div class="div" v-bind:class="[show_menu == 'system' ? 'bac-session' : '']" @click="clickMenu('system')"
           v-if="is_system == true">公共应用
      </div>
      <Button type="primary" class="Button" @click="saveInfoAjax()" :loading="save_loading">保存</Button>
    </div>
    <div class="setup-body">
      <Card v-if="communicateArr.length > 0">
        <p slot="title">
          智慧沟通
        </p>
        <div style="min-height: 200px;">
          <div class="menu-div">
            <Col :sm="6" :md="6" :lg="6" :style="{marginBottom: '10px'}" v-for="(el,index) in communicateArr"
                 :key="'communicate_' + index" style="padding: 0px 6px;">
            <infor-card
              @clickFunction="clickFunction(el)"
              :id-name="el.id + '_' + el.title"
              :end-val="0"
              iconType="ios-people"
              :color="AppStroeArr.indexOf(el.id) > -1 && el.permission == true ? '#4caf50' : '#c1c1c1'"
              :intro-text="el.title"
              :show-close="el.permission != true ? true : false"
            ></infor-card>
            </Col>
          </div>
        </div>
      </Card>
      <Card v-if="workArr.length > 0" style="margin-top: 10px;">
        <p slot="title">
          智慧办公
        </p>
        <div style="min-height: 200px;">
          <div class="menu-div">
            <Col :sm="6" :md="6" :lg="6" :style="{marginBottom: '10px'}" v-for="(el,index) in workArr"
                 :key="'work_' + index" style="padding: 0px 6px;">
            <infor-card
              @clickFunction="clickFunction(el)"
              :id-name="el.id + '_' + el.title"
              :end-val="0"
              iconType="ios-paper"
              :color="AppStroeArr.indexOf(el.id) > -1 && el.permission == true ? '#2d8cf0' : '#c1c1c1'"
              :intro-text="el.title"
              :show-close="el.permission != true ? true : false"
            ></infor-card>
            </Col>
          </div>
        </div>
      </Card>
      <Card v-if="streetArr.length > 0" style="margin-top: 10px;">
        <p slot="title">
          智慧街道
        </p>
        <div style="min-height: 200px;">
          <div class="menu-div">
            <Col :sm="6" :md="6" :lg="6" :style="{marginBottom: '10px'}" v-for="(el,index) in streetArr"
                 :key="'street_' + index" style="padding: 0px 6px;">
            <infor-card
              @clickFunction="clickFunction(el)"
              :id-name="el.id + '_' + el.title"
              :end-val="0"
              iconType="md-map"
              :color="AppStroeArr.indexOf(el.id) > -1 && el.permission == true ? '#ff891c' : '#c1c1c1'"
              :intro-text="el.title"
              :show-close="el.permission != true ? true : false"
            ></infor-card>
            </Col>
          </div>
        </div>
      </Card>
      <Card v-if="platformArr.length > 0" style="margin-top: 10px;">
        <p slot="title">
          智慧平台
        </p>
        <div style="min-height: 200px;">
          <div class="menu-div">
            <Col :sm="6" :md="6" :lg="6" :style="{marginBottom: '10px'}" v-for="(el,index) in platformArr"
                 :key="'platform_' + index" style="padding: 0px 6px;">
            <infor-card
              @clickFunction="clickFunction(el)"
              :id-name="el.id + '_' + el.title"
              :end-val="0"
              iconType="md-speedometer"
              :color="AppStroeArr.indexOf(el.id) > -1 && el.permission == true ? '#f44336' : '#c1c1c1'"
              :intro-text="el.title"
              :show-close="el.permission != true ? true : false"
            ></infor-card>
            </Col>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
  import inforCard from './components/inforCard.vue';
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  export default {
    components: {
      inforCard
    },
    data () {
      return {
        save_loading: false,
        is_system: false,// 是否为管理员
        show_menu: 'self',// self 个人、system 公共
        //'communicate','work','street','platform'
        communicateArr: [],// 智慧沟通,ios-people,#4caf50
        workArr: [],// 智慧办公,ios-paper,#2d8cf0
        streetArr: [],// 智慧街道,md-map,#ff891c
        platformArr: [],// 智慧平台,md-speedometer,#f44336
        AppStroeArr: [],// 我设置的
        DefaultAppArr: [],// 管理员设置的
      };
    },
    created: function () {
      var _this = this;
      _this.getRoles();// 是否为管理员
      _this.getSetup_permission();// 查询所有权限
      _this.getqueryAppStroe();// 我设置的权限
      _this.getqueryDefaultApp();// 管理员设置的权限
    },
    mounted () {
      var _this = this;
      _this.$nextTick(function () {
        var height = $('#application_setup').height();
        var H = height - 60;
        $('#application_setup .setup-body').height(H);
      });
    },
    methods: {
      // 点击菜单
      clickMenu: function (type) {
        var _this = this;
        if (type && type == 'self' && _this.show_menu != 'self') {
          _this.show_menu = 'self';
          _this.getSetup_permission();// 查询所有权限
          _this.getqueryAppStroe();// 我设置的权限
          _this.getqueryDefaultApp();// 管理员设置的权限
        } else if (type && type == 'system' && _this.show_menu != 'system') {
          _this.show_menu = 'system';
          _this.AppStroeArr = _this.DefaultAppArr;
          _this.DefaultAppArr = [];
        }
      },
      // 点击每个模块
      clickFunction: function (el) {
        var _this = this;
        var id = el.id;
        var permission = el.permission;
        var AppStroeArr = _this.AppStroeArr;
        var DefaultAppArr = _this.DefaultAppArr;
        if (permission != true) { // 无权限
          _this.$Message.destroy();
          _this.$Message.error('无权限，请联系管理员!');
          for (var k in AppStroeArr) {
            if (!AppStroeArr[k]) {
              continue;
            }
            if (AppStroeArr[k] == id) {
              AppStroeArr.splice(k, 1);
              break;
            }
          }
          return false;
        }
        if (AppStroeArr.indexOf(id) > -1) {//存在的
          if (DefaultAppArr.indexOf(id) > -1) {
            _this.$Message.destroy();
            _this.$Message.error('此功能必须保留!');
          } else {
            for (var k in AppStroeArr) {
              if (!AppStroeArr[k]) {
                continue;
              }
              if (AppStroeArr[k] == id) {
                AppStroeArr.splice(k, 1);
                break;
              }
            }
          }
        } else {
          AppStroeArr.push(id);
        }
        AppStroeArr = Utils.onlyArray(AppStroeArr);
        _this.AppStroeArr = AppStroeArr;
      },
      // 查询所有权限
      getSetup_permission () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
        };
        var params = {
          url: '/user/queryAllApp',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            var communicateArr = [];
            var workArr = [];
            var streetArr = [];
            var platformArr = [];
            var loginDataStr = localStorage.getItem('loginData') || '';
            if (loginDataStr != '') {
              var loginData = Util.toJson(loginDataStr);
              var permissionArr = loginData.permission || [];// 我的权限
              var permission = [];
              for (var k1 in permissionArr) {
                if (!permissionArr[k1]) {
                  continue;
                }
                permission.push(permissionArr[k1].id);
              }
              for (var k in data) {
                if (!data[k]) {
                  continue;
                }
                if ((permission.indexOf(data[k].id) > -1)) { // 有权限
                  data[k].permission = true;
                } else {
                  data[k].permission = false;
                }

                var type = data[k].type || '';
                switch (type) {
                  case 'communicate' :
                    communicateArr.push(data[k]);
                    break;
                  case 'work' :
                    workArr.push(data[k]);
                    break;
                  case 'street' :
                    streetArr.push(data[k]);
                    break;
                  case 'platform' :
                    platformArr.push(data[k]);
                    break;
                  default :
                    break;
                }
                _this.communicateArr = communicateArr;
                _this.workArr = workArr;
                _this.streetArr = streetArr;
                _this.platformArr = platformArr;
              }
            }
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 查询我设置的权限
      getqueryAppStroe () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
        };
        var params = {
          url: '/user/queryAppStroe',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            var AppStroeArr = [];
            for (var k in data) {
              if (!data[k]) {
                continue;
              }
              var id = data[k].id || '';
              AppStroeArr.push(id);
            }
            var DefaultAppArr = _this.DefaultAppArr;
            AppStroeArr.push(...DefaultAppArr);
            AppStroeArr = Utils.onlyArray(AppStroeArr);
            _this.AppStroeArr = AppStroeArr;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 查询管理员设置的权限
      getqueryDefaultApp () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
        };
        var params = {
          url: '/user/queryDefaultApp',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            var data = res.data;
            var DefaultAppArr = [];
            for (var k in data) {
              if (!data[k]) {
                continue;
              }
              var id = data[k].id || '';
              DefaultAppArr.push(id);
            }
            _this.DefaultAppArr = DefaultAppArr;
            var AppStroeArr = _this.AppStroeArr;
            AppStroeArr.push(...DefaultAppArr);
            AppStroeArr = Utils.onlyArray(AppStroeArr);
            _this.AppStroeArr = AppStroeArr;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 保存
      saveInfoAjax () {
        var _this = this;
        var ids = [];
        var AppStroeArr = _this.AppStroeArr;
        ids = AppStroeArr;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          ids: ids,
        };
        var url = '/user/updateApp';
        if (_this.show_menu == 'system') {// 管理员
          url = '/user/updateDefault';
        }
        var params = {
          url: url,
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.save_loading = true;
        function _successFun(res) {
          _this.save_loading = false;
          if (res.result == 0) {
            _this.$Message.destroy();
            _this.$Message.success('保存成功!');
            _this.login();
          } else {
            _this.$Message.destroy();
            _this.$Message.error('保存失败!');
          }
        }
      },
      // 是否为管理员
      getRoles () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
        };
        var params = {
          url: '/user/queryRoles',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            // 角色：系统管理员,平台管理员
            if (_data.indexOf('system') > -1 || _data.indexOf('platform') > -1) {
              _this.is_system = true;
            }
          }
        }
      },
      // 更新权限
      login: function () {
        var _this = this;
        var login_mobile = Utils.getCookie('login_mobile');
        var login_password = Utils.getCookie('login_password');
        var mobile = '';
        var password = '';
        if (login_mobile && login_password) {
          login_password = Utils.uncompile(login_password);//解密
          mobile = login_mobile;
          password = login_password;
        }
        var data = {
          mobile: mobile,
          password: password
        };
        var params = {
          url: '/user/login',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            localStorage.setItem('loginData', Util.toStr(data));
            window.location.reload();
          }
        }
      },
    }
  };
</script>
